<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width">
        <title></title>
        <link rel="stylesheet" href="../assets/js/plugin/jsPlumb/css/jsplumb.css">
        <link rel="stylesheet" href="demo.css">
    </head>
    <body data-demo-id="flowchart" data-library="jquery" style="height: 2000px">
        <div id="main">
            <!-- demo -->
            <div class="demo statemachine-demo" id="statemachine-demo">
                <div class="explanation">
                    <i class="fa fa-info-circle"></i>
                    <h4>拓扑图</h4>
                </div>
                <div class="w" id="1" style="top:100px;left: 100px">1</div>
                <div class="w" id="2" style="top:100px;left: 500px">2</div>
                <div class="w" id="3" style="top:200px;left: 100px">3</div>
                <div class="w" id="4" style="top:200px;left: 500px">4</div>
            </div>
            <!-- /demo -->
        </div>
        <script src="../assets/js/jquery.js"></script>
        <script src="../assets/js/plugin/jsPlumb/js/dom.jsPlumb-1.7.2-min.js"></script>
        <!--<script src="demo.js"></script>-->
        <script>
            jsPlumb.ready(function() {

                // setup some defaults for jsPlumb.
                var instance = jsPlumb.getInstance({
                    Endpoint: ["Dot", {radius: 2}],
                    HoverPaintStyle: {strokeStyle: "#1e8151", lineWidth: 4},
                    ConnectionOverlays: [
                        ["Arrow", {
                                location: 1,
                                id: "arrow",
                                length: 14,
                                foldback: 0.7
                            }],
                        ["Label", {label: "FOO", id: "label", cssClass: "aLabel"}]
                    ],
                    Container: "statemachine-demo"
                });
                window.jsp = instance;
                var windows = jsPlumb.getSelector(".statemachine-demo .w");
                // initialise draggable elements.
                instance.draggable(windows);
                instance.bind("click", function(c) {
//                    instance.detach(c);
//                    c.css({"z-index":999});
                });
                instance.bind("connection", function(info) {
                    info.connection.getOverlay("label").setLabel("流速 100M/S");
                });


                // suspend drawing and initialise.
                instance.doWhileSuspended(function() {
                    var isFilterSupported = instance.isDragFilterSupported();
                    if (isFilterSupported) {
                        instance.makeSource(windows, {
                            filter: ".ep",
                            anchor: "Continuous",
                            connector: ["StateMachine", {curviness: 20}],
                            connectorStyle: {strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4},
                            maxConnections: 5,
                            onMaxConnections: function(info, e) {
                                alert("Maximum connections (" + info.maxConnections + ") reached");
                            }
                        });
                    } else {
                        var eps = jsPlumb.getSelector(".ep");
                        for (var i = 0; i < eps.length; i++) {
                            var e = eps[i], p = e.parentNode;
                            instance.makeSource(e, {
                                parent: p,
                                anchor: "Continuous",
                                connector: ["StateMachine", {curviness: 20}],
                                connectorStyle: {strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4},
                                maxConnections: 5,
                                onMaxConnections: function(info, e) {
                                    alert("Maximum connections (" + info.maxConnections + ") reached");
                                }
                            });
                        }
                    }
                });
                // initialise all '.w' elements as connection targets.
                instance.makeTarget(windows, {
                    dropOptions: {hoverClass: "dragHover"},
                    anchor: "Continuous",
                    allowLoopback: true
                });
                // and finally, make a couple of connections
                instance.connect({source: "1", target: "2"});
                instance.connect({source: "1", target: "4"});
                instance.connect({source: "2", target: "1"});
                instance.connect({source: "3", target: "4"});
                instance.connect({source: "3", target: "2"});
                instance.connect({source: "4", target: "3"});
                jsPlumb.fire("jsPlumbDemoLoaded", instance);
            });

        </script>
    </body>
</html>